import React from 'react';
import { Box, Text } from 'ink';
import { AppConfig, ThemeConfig } from '../types';

interface HeaderProps {
  config: AppConfig | null;
  theme: ThemeConfig;
}

const Header: React.FC<HeaderProps> = ({ config, theme }) => {
  const getModelInfo = () => {
    if (!config) return '配置加载中...';
    
    const currentModel = config.models[config.main_ai_model];
    if (!currentModel) return '未知模型';
    
    return `${currentModel.model_name} (${currentModel.model_type})`;
  };

  return (
    <Box flexDirection="column" paddingX={1} paddingY={1}>
      <Box justifyContent="center">
        <Text color={theme.systemMessage} bold>
          🤖 CLI 聊天助手
        </Text>
      </Box>
      
      <Box justifyContent="center">
        <Text color="gray" dimColor>
          当前模型: {getModelInfo()}
        </Text>
      </Box>
      
      <Box justifyContent="center" marginTop={1}>
        <Text color="gray">
          {'═'.repeat(80)}
        </Text>
      </Box>
    </Box>
  );
};

export default Header;